<template>
  <base-breadcrumb :title="titleName">
    <a-card :bordered="false"  >
      <title-name title="通知信息"></title-name>
      <a-form-model :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
        <a-row>
          <a-col :md="8" :sm="8">
            <a-form-model-item label="通知名称">
                <a-textarea class="distextarea" v-model="details.title" auto-size disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-model-item label="通知类型">
              <a-input v-model="details.messageType" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-model-item label="创建时间" >
              <a-input v-model="details.createTime" disabled/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="通知内容">
              <a-textarea v-if="!showJump(details)" class="distextarea" :auto-size="{ minRows: 20, maxRows: 30 }" :value="resolveMessage(details.content).labelText" disabled/>
              <div v-else class="textarea-div">
                {{resolveMessage(details.content).labelText}}
                <span style="color:#40a9ff;cursor: pointer;" @click="clickJump(details)">{{getJump(details)}}</span>
              </div>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>

    <div class="footer page-btn-right-top">
      <a-button type="default"  @click="goBack">关闭</a-button>
    </div>
  </base-breadcrumb>
</template>

<script>
  // import Vue from 'vue'
  import messageBase from './baseconfig.js'
  import { messageRead } from '@/api/messageSend'
  import { jumpMixin } from "./jump";
  export default {
    mixins:[jumpMixin], //混入文件
    props:{
    },
    components:{
    },
    data(){
      return{
        titleName:'',
        loading:false
      }
    },
    watch:{
    },
    computed: {
      details () {
        const text = this.$route.query.detail ? JSON.parse(this.$route.query.detail) : {
          title: '',
          createTime: '',
          content: '',
          messageType: ''
        }
        if (text.messageType && messageBase.newsTypeMap[text.messageType]) {
          text.messageType = messageBase.newsTypeMap[text.messageType].text
        }
        return text
      }
    },
    created() {
      console.log(this.details,2222)
      // this.token = Vue.getAcloudProvider().getAccessToken()
      // this.userId = JSON.parse(sessionStorage.getItem('ycloud-user_info')).id
    },
    mounted() {
      this.readMessage()
    },
    methods:{
      resolveMessage(msg) {
        if(!msg) return {
          originText: msg,
          keyText: '',
          labelText: msg
        }
        let key = ''
        msg.replace && msg.replace(/^\[(.+?)\]/g, function(...args) {
          key = args[0]
        }) || ''
        return {
          originText: msg,
          keyText: key.substring(1, key.length - 1),
          labelText: msg.replace && msg.replace(key, '') || ''
        }
      },
      readMessage() {
        if (!this.details.id) return
        const params = {
          ids: [ this.details.id ]
        }
        messageRead(params).then((res) => {
          if (res && res.data && res.data.code == '200') {
            this.$message.success('查看成功！')
            let count = Number(this.$store.getters['messageInfo/GET_TOREADCOUNT'] - 1)
            this.$store.commit('messageInfo/SET_TOREADCOUNT', count > 0 ? count : 0)
          } else {
            this.$message.error(res.data.message ? res.data.message : '查看失败！')
          }
        })
      },
      goBack() {
        this.$multiTab.close(this.$route.fullpath)
        // 不要用this.$router.replace
        // this.$router.replace('/matters/news/read')
      }
    }
  }
</script>

<style scoped>
  .footer{
    float:right;
    margin-right:10px
  }
  .footer button{
    margin-left:10px
  }
  .distextarea{
    resize: none;
    margin: 0;
  }
  .textarea-div{
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 1;
    width: 100%;
    height: 400px;
    padding:5px 10px;
    border: 1px solid #d9d9d9;
  }
</style>
